const deg = 6;
const hr = document.querySelector("#hour");
const mn = document.querySelector("#minute");
const sc = document.querySelector("#second");

let timer;
const clock = document.getElementById("clock");
const ballWrapper = document.getElementById("ballWrapper");

function drawLines(className, total, translateX) {
  const gap = 360 / total;
  let strHtml = "";
  for (let i = 0; i < total; i++) {
    strHtml += `<li style="transform:rotate(${
      i * gap
    }deg) translate(${translateX}px,-50%);"></li>`;
  }
  const wrap = document.getElementsByClassName(className)[0];
  wrap.innerHTML = strHtml;
}

drawLines("line-min", 60, 185);
drawLines("line-hour", 12, 175);

// 默认肩带正常模式
timer = setInterval(() => {
  let day = new Date();
  let hh = day.getHours() * 30; //当前Hour
  let mm = day.getMinutes() * deg; //当前Minute
  let ss = day.getSeconds() * deg; //当前Second
  hr.style.transform = `rotateZ(${hh + mm / 12}deg)`;
  mn.style.transform = `rotateZ(${mm}deg)`;
  sc.style.transform = `rotateZ(${ss}deg)`;
});

let wrapper = document.getElementById("btnWrapper");
wrapper.style.setProperty("--groove-left", "20px");
let btns = document.getElementsByClassName("btn");
for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function (e) {
    resetBtn(btns);
    switch (i) {
      case 0:
        wrapper.style.setProperty("--groove-left", `calc(20px + ${i * 33.3}%)`);
        break;
      case 1:
        wrapper.style.setProperty("--groove-left", `calc(12px + ${i * 33.3}%)`);
        break;
      case 2:
        wrapper.style.setProperty("--groove-left", `calc(${i * 33.3}%)`);
        break;
    }

    setTimeout(() => {
      btns[i].className = "btn active";
      switch (i) {
        case 0:
          mode1();
          break;
        case 1:
          mode2();
          break;
        case 2:
          mode3();
          break;
      }
    }, 500);
    setTimeout(() => {
      wrapper.className = "";
    }, 550);
  });
}

function resetBtn(btns) {
  for (let i = 0; i < btns.length; i++) {
    setTimeout(() => {
      btns[i].className = "btn";
    }, 100);
  }
}

function mode1() {
  clearInterval(timer);
  timer = setInterval(() => {
    let day = new Date();
    // let day = new Date("2022-11-1 14:56:31")
    let hh = day.getHours() * 30; //当前Hour
    let mm = day.getMinutes() * deg; //当前Minute
    let ss = day.getSeconds() * deg; //当前Second
    hr.style.transform = `rotateZ(${hh + mm / 12}deg)`;
    mn.style.transform = `rotateZ(${mm}deg)`;
    sc.style.transform = `rotateZ(${ss}deg)`;
  });
  ballWrapper.style.setProperty("visibility", "hidden");
  clock.style.setProperty(
    "background-image",
    `url('https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c3e64c836aeb4be89df3d41d63b78751~tplv-k3u1fbpfcp-watermark.image')`
  );
}

function mode2() {
  clearInterval(timer);
  timer = setInterval(() => {
    let day = new Date();
    let hh = day.getHours() * 30; //当前Hour
    let mm = day.getMinutes() * deg; //当前Minute
    let ss = day.getSeconds() * deg; //当前Second
    hr.style.transform = `rotateZ(${hh + mm / 12}deg)`;
    mn.style.transform = `rotateZ(${mm}deg)`;
    sc.style.transform = `rotateZ(${ss}deg)`;
  });
  ballWrapper.style.setProperty("visibility", "visible");
  clock.style.setProperty(
    "background-image",
    `url('https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/865594fcd3754ea594bc0565386f8ad3~tplv-k3u1fbpfcp-watermark.image')`
  );
}

function mode3() {
  clearInterval(timer);
  timer = setInterval(() => {
    // let day = new Date();
    let day = new Date("2022-11-1 14:56:31");
    let hh = day.getHours() * 30; //当前Hour
    let mm = day.getMinutes() * deg; //当前Minute
    let ss = day.getSeconds() * deg; //当前Second
    hr.style.transform = `rotateZ(${hh + mm / 12}deg)`;
    mn.style.transform = `rotateZ(${mm}deg)`;
    sc.style.transform = `rotateZ(${ss}deg)`;
  });
  ballWrapper.style.setProperty("visibility", "hidden");
  clock.style.setProperty(
    "background-image",
    `url('https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c3e64c836aeb4be89df3d41d63b78751~tplv-k3u1fbpfcp-watermark.image')`
  );
}
